<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)

const { x, y, style } = useDraggable(el, {
  initialValue: { x: 400, y: 400 },
})
</script>

<template>
  <div ref="el" :style="style" style="position: fixed" class="useDraggable">
    Drag me! I am at {{x}}, {{y}}
  </div>
</template>


<style lang="scss" scoped>
.useDraggable {
  padding: 24px;
  background-color: aquamarine;
}
</style>
